@import (reference) '../../base.less';

.@{prefix-cls}-period-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: @period-bar-height;
  width: 100%;
  box-sizing: border-box;
  border-bottom: solid 1px var(--klinecharts-pro-border-color);
  .menu-container {
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: @drawing-bar-width;
    box-sizing: border-box;
    border-right: solid 1px var(--klinecharts-pro-border-color);
    svg {
      fill: var(--klinecharts-pro-text-color);
      width: 28px;
      height: 28px;
      cursor: pointer;
      transition: all .2s;
      &.rotate {
        transform: rotate(180deg);
        transform-origin: center;
      }
    }
  }
  .symbol {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    font-size: 18px;
    padding: 0 12px;
    font-weight: bold;
    box-sizing: border-box;
    border-right: solid 1px var(--klinecharts-pro-border-color);
    cursor: pointer;
    img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }
  }
  .item {
    transition: all 0.2s;
    box-sizing: border-box;
    cursor: pointer;
    fill: var(--klinecharts-pro-text-color);
    &.selected {
      background-color: var(--klinecharts-pro-selected-color)!important;
      color: var(--klinecharts-pro-primary-color);
    }
  }
  .period {
    padding: 2px 6px;
    margin: 0 4px;
    border-radius: 2px;
    &:hover {
      background-color: var(--klinecharts-pro-hover-background-color);
    }
    &:first-child {
      margin-left: 8px;
    }
  }
  .symbol + .period, .menu-container + .period {
    margin-left: 12px;
  }
  .tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 12px;
    border-right: solid 1px var(--klinecharts-pro-border-color);
    &:hover {
      fill: var(--klinecharts-pro-primary-color);
      color: var(--klinecharts-pro-primary-color);
    }
    svg {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }
  .period + .tools {
    border-left: solid 1px var(--klinecharts-pro-border-color);
    margin-left: 8px;
  }
}
